<template>
    <div class="Office">
         <!-- 导航栏开始 -->
        <div class="banner">
            <!-- 版心开始 -->
            <div class="container">
                <ul class="channelList">
                    <router-link to="/Home" tag="li">首页</router-link>
                    <router-link to="/secondHand" tag="li">二手房</router-link>
                    <router-link tag="li" to="/AnewHouse">新房</router-link>
                    <router-link tag="li" to="/rental">租房</router-link>
                    <li class="selected">写字楼</li>
                    <router-link to="/village" tag="li">小区</router-link>
                    <li>问答</li>
                    <li>工具</li>
                    <router-link tag="li" to="/release">发布房源</router-link>
                </ul>
                <!-- 导航栏右边 -->
                <div class="bannerRight">
                    <div class="login">
                        <i></i>
                        <span v-if="!userInfo">登录</span>
                        <span v-if="!userInfo">/</span>
                        <span v-if="!userInfo">注册</span>
                        <span v-if="userInfo">{{userInfo}}</span>
                        <span v-if="userInfo">退出</span>
                    </div>
                    <div class="phone">
                        <i></i>
                        <span>热线电话1010-9000</span>
                    </div>
                    
                </div>
            </div>
            <!-- 版心结束 -->
        </div>
        <!-- 搜索栏目 -->
        <div class="search__area">
            <!-- 租房导航 -->
            <div class="rental-nav">
                <div class="logo"></div>
                <ul class="rental-nav-tab">
                    <li class="selected">写字楼租赁</li>
                    <li>写字楼买卖</li>
                    <li>商铺租赁</li>
                    <li>商铺买卖</li>
                    <li>帮我找房</li>
                </ul>
            </div>
            <!-- 搜索房源 -->
            <div class="search">
                <!-- 搜索框 -->
                <div class="search-wrap">
                    <input type="text" placeholder="请输入区域、商圈或小区名开始找房">
                    <span class="search_button"></span>
                    <!-- 历史搜索 -->
                    <div class="sug-search">
                        <ol>
                            <p>搜索历史<span>清空搜索历史</span></p>
                            <li>
                                <div class="oneline">
                                    <div class="suggest-h1">广州</div>
                                    <div class="suggest-light">整租</div>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- 栏目标题 -->
        <div class="bread_nav">
            <p>广州链家网&nbsp;>&nbsp;</p>
            <h1>广州写字楼</h1>
        </div>
        <!-- 筛选项 -->
        <div class="filter">
            <div class="filter_wrapper">
                <!-- 区域 地铁 -->
                <ul class="filter__item--noaside">
                    <li class="filter__item--level1 selected">
                        <span>按区域</span>
                        <i></i>
                    </li>
                    <li class="filter__item--level1">
                        <span>按地铁线</span>
                        <i></i>
                    </li>
                    <li class="filter__item--level1">
                        <span>热门商圈</span>
                        <i></i>
                    </li>
                </ul>
                <!-- 地区 -->
                <ul class="area">
                    <li class="selected">
                        <span>不限</span>
                    </li>
                    <li>
                        <span>天河</span>
                    </li>
                    <li>
                        <span>越秀</span>
                    </li>
                </ul>
                <!-- 地铁 -->
                <ul class="subway" style="display:none">
                    <li class="selected">
                        <span>不限</span>
                    </li>
                    <li>
                        <span>地铁三号线</span>
                    </li>
                </ul>
                <!-- 热门商圈 -->
                <ul class="subway" style="display:none">
                    <li class="selected">
                        <span>不限</span>
                    </li>
                    <li>
                        <span>珠江新城中</span>
                    </li>
                </ul>
                <!-- 价格 -->
                <ul class="priceType">
                    <h1>价格</h1>
                    <li class="selected">月单价(元/m²/月)</li>
                    <li>总价(万元/月)</li>
                </ul>
                <!-- 价格选项 -->
                <ul class="subway" >
                    <li class="selected">
                        <span>不限</span>
                    </li>
                    <li>
                        <span>&lt;90元</span>
                    </li>
                </ul>
                <!-- 总价 -->
                <ul class="subway" style="display:none">
                    <li class="selected">
                        <span>不限</span>
                    </li>
                    <li>
                        <span>&lt;0.5万元</span>
                    </li>
                </ul>
                <!-- 租金 -->
                <ul class="filter_ul">
                    <h1>租金</h1>
                    <li class="selected">
                        <span>不限</span>
                    </li>
                     <li>
                        <span>1000-1500元</span>
                    </li>
                </ul>
                <!-- 户型 -->
                 <ul class="filter_ul">
                    <h1>户型</h1>
                    <li class="selected">
                        <span>不限</span>
                    </li>
                     <li>
                        <span>两居</span>
                    </li>
                </ul>
                <!-- 朝向 -->
                <ul class="filter_ul">
                    <h1>朝向</h1>
                    <li class="selected">
                        <span>不限</span>
                    </li>
                     <li>
                        <span>西</span>
                    </li>
                </ul>

                <!--更多 -->
                <div class="filter_item-more">
                    <span>收起</span>
                    <span>更多</span>
                    <i class="icon"></i>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <!-- 左边的内容 -->
            <div class="content_left">
                <!-- 搜索信息 -->
                <div class="content_title">已为您找到<span>86643</span> 套 <div class="text">广州写字楼</div>
                <i>清空条件</i>
                </div>
                <!-- 搜索结果模块 -->
                <ul class="content_filter">
                   <li class="selected">默认排序</li> 
                   <li>单价从低到高</li>
                   <li>单价从高到低</li>
                   <li>总价从低到高</li>
                   <li>总价从高到低</li>
                   <li>面积从小到大</li>
                </ul>
                <!-- 房源列表信息 -->
                <div class="content_list">
                    <ul>
                        <li>
                            <div class="image">
                                <img src="../assets/image/rental01.jpg" alt="">
                            </div>
                            <div class="content_list_main">
                                <div class="content__list--item--title">
                                    <span>独栋·龙湖冠寓 广州燕塘店 0中介 押一付一大房 开间</span>
                                </div>
                                <div class="content__list--item--bottom">
                                    <span>有免租期</span>
                                    <span>近地铁</span>
                                    <span>有车位</span>
                                    <span>7日新上</span>
                                    <span>可注册</span>
                                    <span>精装修</span>
                                </div>
                                <div class="content__list--item--des">
                                    <span>345m²</span>
                                    <span>|</span>
                                    <span>东南</span>
                                    <span>|</span>
                                    <span>精装修</span>
                                    
                                </div>
                                <div class="content__list--item--brand">
                                    <span>天河.富力盈通大厦</span>
                                </div>
                                <div class="content__list--item-price">
                                    <span class="header">1.8<i>万元/月</i></span>
                                    <span class="bottom">130<i>元/m²/月</i></span>
                                </div>
                            </div>
                        </li>
                         <li>
                            <div class="image">
                                <img src="../assets/image/rental01.jpg" alt="">
                            </div>
                            <div class="content_list_main">
                                <div class="content__list--item--title">
                                    <span>独栋·龙湖冠寓 广州燕塘店 0中介 押一付一大房 开间</span>
                                </div>
                                <div class="content__list--item--bottom">
                                    <span>有免租期</span>
                                    <span>近地铁</span>
                                    <span>有车位</span>
                                    <span>7日新上</span>
                                    <span>可注册</span>
                                    <span>精装修</span>
                                </div>
                                <div class="content__list--item--des">
                                    <span>345m²</span>
                                    <span>|</span>
                                    <span>东南</span>
                                    <span>|</span>
                                    <span>精装修</span>
                                    
                                </div>
                                <div class="content__list--item--brand">
                                    <span>天河.富力盈通大厦</span>
                                </div>
                                <div class="content__list--item-price">
                                    <span class="header">2.68 <i>万元/月</i></span>
                                    <span class="bottom">130<i>元/m²/月</i></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 右边的内容 -->
            <div class="content_aside">
                <p class="title">热推房源</p>
                <ul>
                    <li>
                        <img src="../assets/image/rental_as01.jpg" alt="">
                        <p class="list_title">整租 · 万科城市之光</p>
                        <p class="desc">黄埔/1室1厅1卫</p>
                        <p class="price">1800元/月</p>
                    </li>
                    <li>
                        <img src="../assets/image/rental_as01.jpg" alt="">
                        <p class="list_title">整租 · 万科城市之光</p>
                        <p class="desc">黄埔/1室1厅1卫</p>
                        <p class="price">1800元/月</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"OfficeView",
        data() {
            return {
                userInfo:""
            }
        },
        created(){
            // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
        }
    }
</script>

<style lang="scss" scoped>
.Office{
     .banner{
        width: 100%;
        height: 36px;
        background-color: #394043;
        .container{
            display: flex;
            justify-content: space-between;
             .channelList{
                display: flex;
                align-items: center;
                height: 36px;
                width: 460px;
                li{
                    font-size: 12px;
                    color: #a9abab;
                    margin-right: 21.5px;
                    cursor: pointer;
                    &:hover{
                        color: #fff;
                    }
                    &.selected{
                        color: #fff;
                    }
                }
            }
            .bannerRight{
                display: flex;
                align-items: center;
                .phone{
                    display: flex;
                    align-items: center;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -495px -220px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                    }
                }
                .login{
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    cursor: pointer;
                    i{
                        width: 12px;
                        height: 12px;
                        margin-right: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684)no-repeat -554px -173px;
                    }
                    span{
                        font-size: 12px;
                        color: #fff;
                        margin-right: 5px;
                    }
                }
            }
        }
       
    }
    .search__area{
        width: 100%;
        min-width: 1150px;
        height: 155px;
        padding: 25px 0;
        background: #f5f5f6;
        box-sizing: border-box; 

        .rental-nav{
            width: 1150px;
            height: 30px;
            margin: 0 auto 27px;
            display: flex;
            align-items: center;

            .logo{
                width: 137px;
                height: 26px;
                background: url("../assets/image/商业logo.png")no-repeat 0 center/cover;
                margin-right: 50px;
            }

            .rental-nav-tab{
                vertical-align: bottom;
                display: flex;
                
                li{
                    line-height: 25px;
                    font-size: 16px;
                    margin-right: 30px;
                    position: relative;
                    font-weight: 700;
                    cursor: pointer;
                    &.selected{
                        color: #00ae66;
                    }
                }
            }
            
        }
        .search{
            margin: 20px auto 24px;
            position: relative;
            width: 1150px;
            .search-wrap{
                box-shadow: 0 1px 1px 1px rgb(0 0 0 / 10%);
                height: 44px;
                width: 710px;
                line-height: 46px;
                font-size: 14px;
                border-radius: 2px;
                background-color: #fff;
                // overflow: hidden;
                display: flex;
                position: relative;
                
                input{
                    width: 668px;
                    padding: 14px 23px 14px;
                    box-sizing: border-box;
                    border-width: 0;
                    font-size: 13px;
                    color: #101d37;
                }
                .search_button{
                    width: 38px;
                    height: 38px;
                    margin-top: 3px;
                    margin-left: 4px;
                    color: transparent;
                    text-align: center;
                    cursor: pointer;
                    background: url(https://s1.ljcdn.com/matrix_pc/dist/pc/src/resource/list/search@2x.jpg?v=1666699011404) no-repeat 0 0/ contain;
                }
                
                .sug-search{
                    top: 46px;
                    left: 0;
                    width: 710px;
                    position: absolute;
                    background: #fff;
                    font-size: 14px;
                    z-index: 999;
                    white-space: nowrap;
                    overflow: hidden;
                    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 20%);

                    ol{
                        display: none;
                        p{
                            display: flex;
                            justify-content: space-between;
                            background-color: #f4f7f9;
                            padding-left: 13px;
                            padding-right: 13px;
                            background: #f4f7f9;
                            font-size: 14px;
                            color: #9399a5;
                            line-height: 40px;

                            span{
                                color: #5680a6;
                                text-decoration: underline;
                            }
                        }
                        li{
                            line-height: 40px;
                            height: 40px;
                            cursor: pointer;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            padding-left: 13px;
                            padding-right: 13px;

                            .oneline{
                                display: flex;
                                height: 40px;
                                align-items: center;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                .suggest-h1{
                                    font-size: 14px;

                                }
                                .suggest-light{
                                    color: #929292;
                                    font-size: 12px;
                                    margin-left: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .bread_nav{
        width: 1150px;
        color: #9399a5;
        font-size: 12px;
        margin:25px  auto 0;
        display: flex;
    }
    .filter{
        padding-top: 15px;
        position: relative;
        .filter_wrapper{
            width: 1150px;
            margin: 0 auto;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
            position: relative;

            // 区域地铁
            .filter__item--noaside{
                overflow: hidden;
                margin-top: 3px;
                margin-bottom: 3px;
                position: relative;
                color: #101d37;
                display: flex;

                .filter__item--level1{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    margin-right: 18px;
                    display: flex;
                    align-items: center;
                    height: 16px;
                    margin-right: 30px;
                    cursor: pointer;
                    
                    &.selected{
                        span{
                            color: #00ae66;
                            font-weight: 700;
                        }
                        i{
                            background-position: -474px -164px;
                        }
                    }

                    &:hover{
                        span{
                            color: #00ae66;
                        }
                    }
                    span{
                        font-size: 14px;
                        color: #333;

                    }
                    i{
                        margin-left: 9px;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/ershoufang/component/sprite.png?t=1551236311684) no-repeat;
                        background-position: -484px -164px;
                        width: 10px;
                        height: 5px;
                    }
                }
            }
            // 地区
            .area{
                overflow: hidden;
                margin-top: 3px;
                margin-bottom: 3px;
                position: relative;
                display: flex;
                margin-left: 70px;
                li{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    margin-right: 24px;
                    cursor: pointer;
                    span{
                        color: #101d37;
                        font-size: 14px;
                    }

                    &.selected{
                        span{
                            color: #00ae66;
                            font-weight: 700;
                            font-size: 14px;
                        }
                    }

                    &:hover{
                        span{
                            color: #00ae66;
                        }
                    }
                    &:first-child{
                       margin-right: 35px;
                    }
                }
            }
            // 地铁
            .subway{
                overflow: hidden;
                margin-top: 3px;
                margin-bottom: 3px;
                position: relative;
                display: flex;
                margin-left: 70px;

                li{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    margin-right: 24px;
                    cursor: pointer;
                    span{
                        color: #101d37;
                        font-size: 14px;
                    }

                    &.selected{
                        span{
                            color: #00ae66;
                            font-weight: 700;
                        }
                    }

                    &:hover{
                       span{
                         color: #00ae66;
                       }
                    }
                     &:first-child{
                       margin-right: 35px;
                    }
                }
            }
            // 总价
            .priceType{
                overflow: hidden;
                margin-top: 3px;
                margin-bottom: 3px;
                position: relative;
                display: flex;
                align-items: center;

                h1{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    // margin-right: 35px;
                    width: 70px;
                    font-size: 14px;
                    color:#101d37;
                    font-weight: 700;
                }

                li{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    margin-right: 18px;
                    font-size: 14px;
                    color: #101d37;
                    cursor: pointer;

                    &.selected{
                        color: #00ae66;
                        font-weight: 700;
                    }

                    &:hover{
                        color: #00ae66;
                    }
                    
                }
            }
            // 租金
            .filter_ul{
                overflow: hidden;
                margin-top: 3px;
                margin-bottom: 3px;
                display: flex;
                align-items: center;

                h1{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    // margin-right: 35px;
                    width: 70px;
                    font-size: 14px;
                    color:#101d37;
                    font-weight: 700;
                }

                li{
                    margin-top: 9px;
                    margin-bottom: 9px;
                    margin-right: 18px;
                    display: flex;
                    cursor: pointer;
                    &:hover{
                        span{
                            color: #00ae66;
                        }
                    }

                    input{
                        margin: 0;
                        margin-right: 6px;
                    }
                    span{
                        font-size: 14px;
                        color: #101d37;
                    }

                    &.selected{
                        span{
                            color: #00ae66;
                        }
                    }
                    &:first-of-type{
                       margin-right: 35px;
                    }
                }

            }

            // 更多
            .filter_item-more{
                width: 100px;
                height: 30px;
                position: absolute;
                bottom: -15px;
                left: 50%;
                margin-left: -50px;
                text-align: center;
                font-size: 13px;
                line-height: 30px;
                color: #9399a5;
                cursor: pointer;
                background: #fff;

                i{
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    vertical-align: top;
                    margin-top: 8px;
                    margin-left: 8px;
                    background: url(https://s1.ljcdn.com/matrix_pc/dist/pc/src/resource/list/more_up.png?v=1666699011404) no-repeat 50%;
                    background-size: 13px;

                    &.icon{
                        display: inline-block;
                        width: 13px;
                        height: 13px;
                        vertical-align: top;
                        margin-top: 8px;
                        margin-left: 8px;
                        background: url(https://s1.ljcdn.com/matrix_pc/dist/pc/src/resource/list/more_up.png?v=1666699011404) no-repeat 50%;
                        background-size: 13px;
                    }
                }
            }
        }
    }
    .content{
        overflow: hidden;
        margin: 0 auto 62px;
        width: 1150px;
        display: flex;
        justify-content: space-between;

        .content_left{
            width: 850px;
            display: flex;
            flex-direction: column;
            .content_title{
                display: flex;
                width: 850px;
                font-size: 16px;
                color: #101d37;
                margin-top: 30px;
                margin-bottom: 14px;
                font-weight: 700;
                position: relative;

                span{
                    color: #00ae66;
                    margin: 0 5px;
                }
                .text{
                    color: black;
                    font-size: 16px;
                    font-weight: 700;
                    margin-left: 5px;
                }
                i{
                    position: absolute;
                    color: #5680a6;
                    text-decoration: underline;
                    font-size: 14px;
                    font-weight: 400;
                    right: 0;
                    cursor: pointer;

                }
            }
            
            .content_filter{
                height: 46px;
                display: flex;
                align-items: center;
                border-bottom:1px solid #e5e5e5;

                li{
                    font-size: 14px;
                    color: rgba(0,0,0,.65);
                    // margin-right: 37px;
                    padding: 0 20px;
                    height: 46px;
                    // width: 52px;
                    text-align: center;
                    line-height: 46px;
                    border-bottom: 2px solid transparent;
                    cursor: pointer;
                    transition: all 0.5s linear;
                    &:hover{
                        color: #00ae66;
                        border-bottom:2px solid #00ae66;
                    }
                    &.selected{
                        border-bottom:2px solid #00ae66;
                        color: #00ae66;
                    }
                }
            }

            .content_list{
                
                width: 776px;
                ul{
                    display: flex;
                    width: 100%;
                    flex-direction: column;

                    li{
                        padding:30px 0;
                        width: 100%;
                        display: flex;
                        .image{
                            display: flex;
                            align-items: center;
                            width: 160px;
                            height: 110px;
                            margin-right: 30px;
                            img{
                                border-radius: 5px;
                                overflow: hidden;
                                width: 100%;
                            }    
                        }

                        .content_list_main{
                            position: relative;
                            width: 660px;

                            .content__list--item--title{
                                display: flex;
                                align-items: center;
                                // margin-bottom: 18px;
                                line-height: 1.5;
                                cursor: pointer;

                                span{
                                    display: inline-block;
                                    max-width: 450px;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: #101d37;
                                    font-family: HiraginoSansGB-W6;
                                    }

                                &:hover{
                                    span{
                                        color: #00ae66;
                                    }
                                }
                            }
                            .content__list--item--des{
                                margin-top: 6px;
                                cursor: pointer;
                                span{
                                    font-size: 12px;
                                    color: rgba(0,0,0,.65);
                                    margin-right: 3px;
                                }

                                
                            }
                            .content__list--item--bottom{
                                height: 24px;
                                margin-bottom: 6px;
                                margin-top: 7px;
                                span{
                                    display: inline-block;
                                    font-family: HiraginoSansGB-W3;
                                    height: 24px;
                                    line-height: 24px;
                                    font-size: 12px;
                                    text-align: center;
                                    color: #849aae;
                                    background-color: rgba(132,154,174,.1);
                                    border-radius: 2px;
                                    margin-right: 6px;
                                    padding: 0 11px;
                                }
                            }
                            .content__list--item--brand{
                                line-height: 1.5;
                                color: #9399a5;
                                margin-top: 6px;
                                span{
                                    color: rgba(0,0,0,.65);
                                    font-family: HiraginoSansGB-W3;
                                    font-size: 12px;
                                    margin-right: 10px;
                                }
                            }

                            .content__list--item-price{
                                position: absolute;
                                right: 0;
                                top: 0;
                                display: flex;
                                align-items: center ;
                                flex-direction: column;
                                
                               
                               .header{
                                    display: flex;
                                    color: #fa5741;
                                    font-size: 24px;
                                    line-height: 24px;
                                    font-weight: 700;
                                    font-family: Tahoma;
                                    
                                    i{
                                        font-size: 14px;
                                        margin-left: 5px;
                                        margin-top: 2px;
                                    }
                                
                               }
                               .bottom{
                                    color: #9399a5;
                                    font-family: Tahoma;
                                    font-size: 14px;
                                    line-height: 22px;
                                    font-weight: 700;
                               }
                            }
                        }
                    }
                }
            }
        }
        .content_aside{
            margin-top: 30px;
            margin-right: 30px;
            width: 170px;
            display: flex;
            flex-direction: column;
            .title{
                font-size: 20px;
                line-height: 30px;
                margin-bottom: 20px;
                font-family: HiraginoSansGB-W6;
                font-weight: 700;
            }

            ul{
                li{
                    margin-bottom: 24px;
                    img{
                        width: 170px;
                        height: 127px;
                        margin-bottom: 16px;
                        border-radius: 2px;
                    }

                    .list_title{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-bottom: 8px;
                        color: #101d37;
                        line-height: 1;
                        font-size: 13px;
                    }

                    .desc{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #9399a5;
                        margin-bottom: 8px;
                        font-size: 13px;
                    }

                    .price{
                        line-height: 1;
                        color: #fa5741;
                        font-size: 16px;
                        font-family: HiraginoSansGB-W6;
                        margin-top: 4px;
                        margin-bottom: 3px;   
                    }
                }
            }
        }
    }
}
</style>